<template>
  <div class="app-title">
    <el-menu mode="horizontal" 
      data-tauri-drag-region 
      router 
      style="flex-grow: 1; height: 50px;">
      <el-menu-item index="/">设置</el-menu-item>
      <el-menu-item index="/main">主控板</el-menu-item>
      <el-menu-item index="/heat">加热控制板</el-menu-item>
      <el-menu-item index="/weight">称重控制板</el-menu-item>
    </el-menu>
    <div class="btn-app-close" @click="appClose"></div>
  </div>
  <div style="overflow-y: scroll;">
    <RouterView v-slot="{ Component }">
      <KeepAlive>
        <component :is="Component"></component>
      </KeepAlive>
    </RouterView>
  </div>

</template>

<script setup lang="ts">

import conn from './service/conn';

async function appClose() {
  await conn.close();
}

</script>

<style>

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

#app {
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  
  background-color: white;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 0px #ccc;

  display: flex;
  flex-direction: column;
}

.app-title {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.btn-app-close {
  width: 30px;
  height: 30px;
  background-size: 100% 100%;
  background-image: url('./assets/close_normal.png');
}

.btn-app-close:hover {
  background-image: url('./assets/close_hover.png');
}

.btn-app-close:active {
  background-image: url('./assets/close_press.png');
}

.col {
  display: flex;
  flex-direction: column;
}

.col_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
}

.row_center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card {
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ccc;
}

.card2 {
  border-radius: 4px;
  border: 1px solid #ccc;
}

.m10 {
  margin: 5px;
}

.p10 {
  padding: 5px;
}

.mt {
  margin-top: 5px;
}

.ml {
  margin-left: 5px;
}

.title {
  font-size: 17px;
  align-self: center;
}

* {
  font-family: 'Consolas';
  user-select: none;
}

.less {
    font-size: 10px;
}

::-webkit-scrollbar {
  width: 0px;
}

.num_input {
  max-width: 60px;
}

</style>


